import type { FC } from 'react';
import { useRequest } from 'umi';
import { Suspense, useState, useEffect } from 'react';
import MemberList from './components/Members';
import { GridContent } from '@ant-design/pro-layout';
import IntroduceRow from './components/IntroduceRow';
import PageLoading from './components/PageLoading';
import type { AnalysisData } from './data.d';
import { getDashboard } from '@/services/ant-design-pro/api';

type DashboardProps = {
  dashboard: AnalysisData;
  loading: boolean;
};

const Dashboard: FC<DashboardProps> = () => {
  const [dashboard, setDashboard] = useState<API.DashboardItem>({
    error_count: 0,
    total_count: 0,
    success_count: 0,
    leader: '',
  });

  const { data } = useRequest(getDashboard);
  useEffect(() => {
    console.log(data);
    setDashboard(data || {});
  }, [data]);
  return (
    <GridContent>
      <>
        <Suspense fallback={<PageLoading />}>
          <IntroduceRow data={dashboard} />
        </Suspense>

        <Suspense fallback={null}>
          <MemberList />
        </Suspense>
      </>
    </GridContent>
  );
};

export default Dashboard;
